<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机展示</title>
    <style>
        *{ padding:0; margin:0; list-style:none;}
        .all{
            width:1000px;
            height:426px;
            margin:100px auto;
        }
        body{ background:#060F2E;}
        .all li{
            float:left;
            width:320px;
            height:426px;
            background:url(images/01.jpg);
            cursor:pointer;
        }
        .all .big{
            width:360px;
            height:458px;
            background:url(images/01big.jpg);
            margin-top:-15px;
        }
    </style>
    <script>
        window.onload=function(){
            var li01=document.getElementById('li01');   //获取li元素对象
            var li02=document.getElementById('li02');
            var li03=document.getElementById('li03');
            li01.onmouseover=function(){                  //鼠标移入事件
                li01.className='big'
            }
            li01.onmouseout=function(){                   //鼠标移出事件
                li01.className=''
            }
            li02.onmouseover=function(){
                li02.className='big';
                li02.style.background='url(img/02big.jpg)'  //修改背景图片
            }
            li02.onmouseout=function(){
                li02.className=''
                li02.style.background='url(img/02.jpg)'
            }
            li03.onmouseover=function(){
                li03.className='big';
                li03.style.background='url(img/03big.jpg)'
            }
            li03.onmouseout=function(){
                li03.className=''
                li03.style.background='url(img/03.jpg)'
            }
        }
    </script>
</head>
<body>
<ul class="all">
    <li id="li01"></li>
    <li id="li02" style="background:url(images/02.jpg)"></li>
    <li id="li03" style="background:url(images/03.jpg)"></li>
</ul>
</body>
</html>